<script setup>
import {ref} from 'vue';

const enforceFlightSize = ref(false);
const allowOffAxisAttack = ref(false);
const oneTimeOnly = ref(false);
const input = ref('0')
</script>

<!--AircraftContent主体内容-->
<template>
  <div id="aircraftContent">
    <!--Flight size下拉框-->
    <div class="MissDR-dropdown">
      <el-row :gutter="20">
        <el-col :span="6">
          <div>
            Flight size:
          </div>
        </el-col>
        <el-col :span="18">
          <select class="MissDR-dropdown-option flight-option">
            <option value="option1">
              Single aircraft
            </option>
            <option value="option2">
              Section(2x aircraft),typical for fighters
            </option>
            <option value="option3">
              Cell(3x aircraft),typical for bombers
            </option>
            <option value="option4">
              Two Sections(4x aircraft),typical for attack aircraft
            </option>
            <option value="option5">
              Three Sections(6x aircraft),for medium/heavy attack aircraft
            </option>
          </select>
        </el-col>
      </el-row>
    </div>

    <!--Cruise formation-->
    <div class="cruise-formation">
      <span>
        Cruise formation:
      </span>

    </div>

    <!--Attack formation-->
    <div class="attack-formation">
      <span>
        Attack formation:
      </span>
    </div>

    <!--Fuel/ordnance-->
    <div class="fuel-ordnance">
      <span>
        Fuel/ordnance:
      </span>
    </div>

    <!--Minimum # of ready strike a/c required to trigger mission下拉框-->
    <div class="MissDR-dropdown">
      <div style="display:inline-block;">
        Minimum # of ready strike a/c required to trigger mission:
      </div>
      <select class="MissDR-dropdown-option flight-option mof-option">
        <option value="option1">
          Single aircraft
        </option>
        <option value="option2">
          Section(2x aircraft),typical for fighters
        </option>
        <option value="option3">
          Cell(3x aircraft),typical for bombers
        </option>
        <option value="option4">
          Two Sections(4x aircraft),typical for attack aircraft
        </option>
        <option value="option5">
          Three Sections(6x aircraft),for medium/heavy attack aircraft
        </option>
      </select>
    </div>

    <!--Minimum # of flight allowed to fly mission下拉框-->
    <div class="MissDR-dropdown">
      <div style="display:inline-block;">
        Minimum # of flight allowed to fly mission:
      </div>
      <select class="MissDR-dropdown-option flight-option mof-option mf-option">
        <option value="option1">
          Single aircraft
        </option>
        <option value="option2">
          Section(2x aircraft),typical for fighters
        </option>
        <option value="option3">
          Cell(3x aircraft),typical for bombers
        </option>
        <option value="option4">
          Two Sections(4x aircraft),typical for attack aircraft
        </option>
        <option value="option5">
          Three Sections(6x aircraft),for medium/heavy attack aircraft
        </option>
      </select>
    </div>

    <!--Minimum / maximum strike radius(dist to tgt)输入框-->
    <div class="MissDR-dropdown">
      <div style="display:inline-block;">
        Minimum / maximum strike radius(dist to tgt):

        <input
            v-model="input"
            style="width: 10%;
                margin-left:40px;
                padding-left:5px ;
              background-color: #1f1f1f;
              color: white;
              border: none;
              font-size: 10px;
              "
        />
        <span>
          -
        </span>
        <input
            v-model="input"
            style="width: 10%;
                padding-left:5px ;
              background-color: #1f1f1f;
              color: white;
              border: none;
              font-size: 10px;
              "
        />
        <span>
          nm
        </span>
      </div>
    </div>

    <!--底部6个下拉框-->
    <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <div>
            <div class="MissDR-dropdown">
              Radar usage:
            </div>

            <div class="MissDR-dropdown">
              Tankers(AAR):
            </div>

            <div class="MissDR-dropdown">
              Time-of-day:
            </div>

            <div class="MissDR-dropdown">
              Weather:
            </div>

            <div class="MissDR-dropdown">
              Attack Method:
            </div>

            <div class="MissDR-dropdown">
              Split Distance:
            </div>
          </div>
        </el-col>
        <el-col :span="18">
          <div>
            <!--Radar usage-->
            <div class="MissDR-dropdown MissDR-dropdown2">
              <select class="MissDR-dropdown-option flight-option ra-option">
                <option value="option1">
                  Use mission EMCON for whole fllightplan
                </option>
              </select>
            </div>

            <!--Tankers(AAR)-->
            <div class="MissDR-dropdown MissDR-dropdown2">
              <select class="MissDR-dropdown-option flight-option ra-option">
                <option value="option1">
                  Single aircraft
                </option>
                <option value="option2">
                  Section(2x aircraft),typical for fighters
                </option>
                <option value="option3">
                  Cell(3x aircraft),typical for bombers
                </option>
                <option value="option4">
                  Two Sections(4x aircraft),typical for attack aircraft
                </option>
                <option value="option5">
                  Three Sections(6x aircraft),for medium/heavy attack aircraft
                </option>
              </select>
            </div>

            <!--Time-of-day-->
            <div class="MissDR-dropdown MissDR-dropdown2">
              <select class="MissDR-dropdown-option flight-option ra-option">
                <option value="option1">
                  Single aircraft
                </option>
                <option value="option2">
                  Section(2x aircraft),typical for fighters
                </option>
                <option value="option3">
                  Cell(3x aircraft),typical for bombers
                </option>
                <option value="option4">
                  Two Sections(4x aircraft),typical for attack aircraft
                </option>
                <option value="option5">
                  Three Sections(6x aircraft),for medium/heavy attack aircraft
                </option>
              </select>
            </div>

            <!--Weather-->
            <div class="MissDR-dropdown MissDR-dropdown2">
              <select class="MissDR-dropdown-option flight-option ra-option">
                <option value="option1">
                  Single aircraft
                </option>
                <option value="option2">
                  Section(2x aircraft),typical for fighters
                </option>
                <option value="option3">
                  Cell(3x aircraft),typical for bombers
                </option>
                <option value="option4">
                  Two Sections(4x aircraft),typical for attack aircraft
                </option>
                <option value="option5">
                  Three Sections(6x aircraft),for medium/heavy attack aircraft
                </option>
              </select>
            </div>

            <!--Attack Method-->
            <div class="MissDR-dropdown MissDR-dropdown2">
              <select class="MissDR-dropdown-option flight-option ra-option">
                <option value="option1">
                  Single aircraft
                </option>
                <option value="option2">
                  Section(2x aircraft),typical for fighters
                </option>
                <option value="option3">
                  Cell(3x aircraft),typical for bombers
                </option>
                <option value="option4">
                  Two Sections(4x aircraft),typical for attack aircraft
                </option>
                <option value="option5">
                  Three Sections(6x aircraft),for medium/heavy attack aircraft
                </option>
              </select>
            </div>

            <!--Split Distance-->
            <div class="MissDR-dropdown MissDR-dropdown2">
              <select class="MissDR-dropdown-option flight-option ra-option">
                <option value="option1">
                  Single aircraft
                </option>
                <option value="option2">
                  Section(2x aircraft),typical for fighters
                </option>
                <option value="option3">
                  Cell(3x aircraft),typical for bombers
                </option>
                <option value="option4">
                  Two Sections(4x aircraft),typical for attack aircraft
                </option>
                <option value="option5">
                  Three Sections(6x aircraft),for medium/heavy attack aircraft
                </option>
              </select>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!--下方选项区域-->
    <div class="options">
      <!-- Enforce flight size选项区域 -->
      <div class="MissDR-dropdown AC-enforce">
        <input type="checkbox" v-model="enforceFlightSize">
        <label for="enforceFlightSize">
          Enforce flight size (by base, aircraft type and loadout)
        </label>
      </div>

      <!-- Allow off-axis attack选项区域 -->
      <div class="MissDR-dropdown AC-enforce">
        <input type="checkbox" v-model="allowOffAxisAttack">
        <label for="allowOffAxisAttack">
          Allow off-axis attack
        </label>
      </div>

      <!-- One time only选项区域 -->
      <div class="MissDR-dropdown AC-enforce">
        <input type="checkbox" v-model="oneTimeOnly">
        <label for="oneTimeOnly">
          One time only (auto-generation by Mission AI)
        </label>
      </div>


    </div>
  </div>
</template>

<style scoped>
#aircraftContent {
  margin: 5px 0;
  height: 390px;
  text-align: left;
  //border: 1px solid white;
}

.MissDR-dropdown, .cruise-formation,
.attack-formation, .fuel-ordnance {
  margin: 1px 0;
  padding: 2px 0;
}


/*flight size下拉框*/
.flight-option {
  width: 95%;
  margin-left: 10px;
}

.mof-option {
  width: 25%;

}

.mf-option {
  margin-left: 80px;
}


/*下方选项区域*/
/* 自定义复选框样式 */
input[type="checkbox"] {
  /* 清除默认复选框样式 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid white;
  width: 16px;
  height: 16px;
  outline: none;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
}

/* 复选框选中状态样式 */
input[type="checkbox"]:checked::before {
  content: "✓";
  font-size: 16px;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 居中 */
}


/* 标签样式 */
label {
  margin-left: 5px;
  color: white;
  cursor: pointer;
}
.AC-enforce {
  display: flex;
  align-items: center;
}

</style>